<script setup lang="ts">
import {
  RequestPath,
  startRequest,
  OperationalResponseData,
  OperationalItemData,
  CategroyResponseData,
  GoodsItemData,
  GoodsResponseData,
} from "../base/RequestWork";
import { onMounted, ref, onUnmounted, computed } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

// 路由管理对象
let router = useRouter();

// 运营位数据 - 对应 Operational_Positions 表
let datas = ref<OperationalItemData[]>([]);

// 快捷导航数据 - 固定的12个导航项
let navShortcuts = ref<
  Array<{ icon: string; text: string; image?: string; link?: string }>
>([
  {
    icon: "📱",
    text: "华为手机",
    image: "/src/assets/1.png",
    link: "/phones",
  },
  {
    icon: "🏃",
    text: "运动健康",
    image: "/src/assets/2.png",
    link: "/sports",
  },
  {
    icon: "🎵",
    text: "影音娱乐",
    image: "/src/assets/3.png",
    link: "/entertainment",
  },
  {
    icon: "💼",
    text: "智慧办公",
    image: "/src/assets/4.png",
    link: "/office",
  },
  {
    icon: "🏠",
    text: "鸿蒙智家",
    image: "/src/assets/5.png",
    link: "/smart-home",
  },
  {
    icon: "🛒",
    text: "鸿蒙智选",
    image: "/src/assets/6.png",
    link: "/harmony-select",
  },
  {
    icon: "🚗",
    text: "鸿蒙智行",
    image: "/src/assets/7.png",
    link: "/smart-car",
  },
  {
    icon: "🧭",
    text: "乾崑智驾",
    image: "/src/assets/8.png",
    link: "/smart-drive",
  },
  {
    icon: "👩",
    text: "她之选",
    image: "/src/assets/9.png",
    link: "/for-her",
  },
  {
    icon: "🏢",
    text: "企业商用",
    image: "/src/assets/10.png",
    link: "/business",
  },
  {
    icon: "🔄",
    text: "以旧换新",
    image: "/src/assets/11.png",
    link: "/trade-in",
  },
  {
    icon: "🔌",
    text: "配件",
    image: "/src/assets/12.png",
    link: "/accessories",
  },
]);

// 热门活动数据 - 改为从商品类模块中获取
let activities = ref<GoodsItemData[]>([]);

// 商品列表相关数据
let categoryList = ref<
  Array<{ id: number; name: string; description?: string }>
>([]);
let categoryGoodsMap = ref<{ [key: number]: GoodsItemData[] }>({}); // 存储每个分类的商品数据

// 轮播相关状态
let carouselStates = ref<{
  [key: number]: { currentIndex: number; totalItems: number };
}>({});

// 返回顶部相关状态
let showBackToTop = ref(false);
let scrollTimer: number | null = null;

// 计算属性：判断是否为前三个分类
const isFirstThreeCategories = computed(() => (index: number) => {
  return index < 3;
});

// Footer 相关数据
const footerServices = [
  { icon: "Truck", title: "满99元包邮", desc: "全场满99元包邮" },
  { icon: "Refresh", title: "7天无理由退货", desc: "购物无忧保障" },
  { icon: "Shield", title: "100%正品保证", desc: "官方授权渠道" },
  { icon: "Headset", title: "专业客服", desc: "7x24小时服务" },
];

const helpColumns = [
  {
    title: "购物指南",
    links: ["购物流程", "会员介绍", "常见问题", "联系客服"],
  },
  {
    title: "配送方式",
    links: ["上门自提", "211限时达", "配送服务查询", "配送费收取标准"],
  },
  {
    title: "支付方式",
    links: ["货到付款", "在线支付", "分期付款", "公司转账"],
  },
  {
    title: "售后服务",
    links: ["售后政策", "价格保护", "退款说明", "返修/退换货"],
  },
];

// 组件挂载时的生命周期函数
onMounted(() => {
  // 请求运营位数据，只获取启用状态的运营位
  loadOperationalData();

  // 加载分类和商品数据
  loadCategory(() => {
    // 为每个分类加载商品数据
    if (categoryList.value.length > 0) {
      categoryList.value.forEach((category) => {
        loadGoodsForCategory(category.id);
      });
    }
  });

  // 添加滚动监听
  window.addEventListener("scroll", handleScroll);
});

// 组件卸载时清理
onUnmounted(() => {
  if (scrollTimer) {
    clearTimeout(scrollTimer);
  }
  window.removeEventListener("scroll", handleScroll);
});

// 处理滚动事件
function handleScroll() {
  // 使用防抖优化性能
  if (scrollTimer) {
    clearTimeout(scrollTimer);
  }

  scrollTimer = setTimeout(() => {
    // 当滚动超过 300px 时显示返回顶部按钮
    const scrollTop =
      document.documentElement.scrollTop || document.body.scrollTop;
    showBackToTop.value = scrollTop > 300;
  }, 100);
}

// 返回顶部功能
function smoothScrollToTop() {
  const scrollTop =
    document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 0) {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  }
}

// 请求运营位数据 - 从 Operational_Positions 表获取
function loadOperationalData() {
  startRequest(RequestPath.operationalGet, "get", { status: 1 })
    .then((response) => {
      let data = response.data as OperationalResponseData;
      datas.value = data.datas || [];
    })
    .catch((error) => {
      ElMessage.error({
        message: error.response?.data?.error || "运营位数据加载失败",
      });
    });
}

// 请求类别数据 - 从 Category 表获取
function loadCategory(cb: () => void) {
  startRequest(RequestPath.categoryListGet, "get", {})
    .then((response) => {
      let data = response.data as CategroyResponseData;
      categoryList.value = data.datas || [];
      // 请求完成后，进行回调函数的执行
      cb();

      // 将分类数据存储到localStorage，供首页使用
      if (categoryList.value.length > 0) {
        localStorage.setItem(
          "categoryList",
          JSON.stringify(categoryList.value)
        );
      }
    })
    .catch((error) => {
      ElMessage.error({
        message: error.response?.data?.error || "分类数据加载失败",
      });
      // 如果请求失败，设置一个默认分类
      categoryList.value = [
        { id: 0, name: "推荐", description: "为您推荐优质商品" },
      ];
      cb();
    });
}

// 为特定分类请求商品数据
function loadGoodsForCategory(cid: number) {
  startRequest(RequestPath.goodsListGet, "get", {
    offset: 0,
    limit: 20, // 加载更多商品用于轮播
    cid,
  })
    .then((response) => {
      let data = response.data as GoodsResponseData;
      // 过滤只保留已上架的商品 (status === 1)
      const availableGoods = (data.datas || []).filter(
        (goods) => goods.status === 1
      );

      // 将过滤后的商品数据存储到对应分类的映射中
      categoryGoodsMap.value[cid] = availableGoods;

      // 初始化轮播状态
      if (availableGoods.length > 0) {
        const startIndex = isFirstThreeCategories.value(
          categoryList.value.findIndex((cat) => cat.id === cid)
        )
          ? 1
          : 0;
        const availableItems = availableGoods.slice(startIndex);
        carouselStates.value[cid] = {
          currentIndex: 0,
          totalItems: availableItems.length,
        };
      }

      // 当所有分类的商品数据加载完成后，设置热门活动数据
      updateActivitiesData();
    })
    .catch((error) => {
      ElMessage.error({
        message: error.response?.data?.error || "商品数据加载失败",
      });
      // 请求失败时设置空数组
      categoryGoodsMap.value[cid] = [];

      // 即使请求失败也尝试更新热门活动数据
      updateActivitiesData();
    });
}

// 更新热门活动数据 - 从商品类模块中各挑一个商品，同样只使用已上架商品
function updateActivitiesData() {
  // 确保所有分类的商品数据都已加载
  if (categoryList.value.length === 0) return;

  const allGoods: GoodsItemData[] = [];

  // 收集所有分类的第一个已上架商品
  categoryList.value.forEach((category) => {
    if (
      categoryGoodsMap.value[category.id] &&
      categoryGoodsMap.value[category.id].length > 0
    ) {
      // 取每个分类的第一个商品（已经是已上架状态）
      allGoods.push(categoryGoodsMap.value[category.id][1]);
    }
  });

  // 如果收集到的商品数量不足4个，尝试从其他分类补充
  if (allGoods.length < 4) {
    categoryList.value.forEach((category) => {
      if (
        categoryGoodsMap.value[category.id] &&
        categoryGoodsMap.value[category.id].length > 1
      ) {
        // 从第二个商品开始取，避免重复
        for (let i = 1; i < categoryGoodsMap.value[category.id].length; i++) {
          if (allGoods.length >= 4) break;
          allGoods.push(categoryGoodsMap.value[category.id][i]);
        }
      }
    });
  }

  // 固定取前4个商品作为热门活动数据
  activities.value = allGoods.slice(0, 4);
}

// 轮播导航方法
function carouselNavigate(cid: number, direction: "prev" | "next") {
  if (!carouselStates.value[cid]) return;

  const state = carouselStates.value[cid];
  if (direction === "prev") {
    state.currentIndex = Math.max(0, state.currentIndex - 1);
  } else {
    state.currentIndex = Math.min(state.totalItems - 4, state.currentIndex + 1);
  }
}

// 点击某个运营位的方法
function clickItem(item: OperationalItemData) {
  if (item.uri) {
    router.push({
      path: "/home" + item.uri,
    });
  }
}

// 导航项点击事件
function navItemClick(item: any) {
  if (item.link) {
    // 跳转到对应页面
    router.push({
      path: item.link,
    });
  } else {
    // 如果没有设置link，使用默认行为
    console.log("导航项点击:", item.text);
  }
}

// 活动项点击事件 - 修改为跳转到商品详情页
function activityClick(item: GoodsItemData) {
  // 修改为跳转到商品详情页，与商品列表区域的跳转逻辑保持一致
  goDetail(item);
}

// 跳转到商品详情页
function goDetail(item: GoodsItemData) {
  if (item.id) {
    router.push({
      name: "goodsDetail",
      params: { id: item.id },
    });
  }
}

// 立即购买按钮点击 - 修改为跳转到商品详情页
// function buyNow(item: GoodsItemData) {
//     goDetail(item)
// }

// 点击更多按钮
function viewMore(category: any) {
  console.log("查看更多:", category.name);
  // 这里可以实现跳转到分类页面的逻辑
}

// 跳转到购物车的方法
function goShopCar() {
  router.push({
    name: "shopCar",
  });
}
</script>

<template>
  <div class="vmall-main">
    <!-- 轮播组件 -->
    <div class="vmall-carousel-container">
      <el-carousel
        indicator-position="outside"
        height="auto"
        v-if="datas && datas.length > 0"
        class="vmall-carousel-viewport"
      >
        <el-carousel-item
          v-for="item in datas"
          :key="item.id"
          style="height: 400px"
        >
          <div class="vmall-carousel-item" @click="clickItem(item)">
            <el-image
              style="width: 100%; height: 400px"
              :src="item.cover"
              fit="fill"
            />
            <div class="vmall-carousel-content">
              {{ item.content }}
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 轮播下方导航 -->
    <div class="vmall-nav-shortcuts">
      <div class="vmall-nav-grid">
        <!-- 第一行：6个导航项 -->
        <div class="vmall-nav-row">
          <div
            class="vmall-nav-item"
            v-for="item in navShortcuts.slice(0, 6)"
            :key="item.text"
            @click="navItemClick(item)"
          >
            <div class="vmall-nav-image">
              <el-image
                style="width: 60px; height: 60px"
                :src="item.image"
                fit="cover"
                :preview-src-list="[item.image]"
                :preview-teleported="true"
              >
                <template #error>
                  <div class="vmall-nav-icon">{{ item.icon }}</div>
                </template>
              </el-image>
            </div>
            <div class="vmall-nav-text">{{ item.text }}</div>
          </div>
        </div>
        <!-- 第二行：6个导航项 -->
        <div class="vmall-nav-row">
          <div
            class="vmall-nav-item"
            v-for="item in navShortcuts.slice(6, 12)"
            :key="item.text"
            @click="navItemClick(item)"
          >
            <div class="vmall-nav-image">
              <el-image
                style="width: 60px; height: 60px"
                :src="item.image"
                fit="cover"
                :preview-src-list="[item.image]"
                :preview-teleported="true"
              >
                <template #error>
                  <div class="vmall-nav-icon">{{ item.icon }}</div>
                </template>
              </el-image>
            </div>
            <div class="vmall-nav-text">{{ item.text }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 热门活动 - 固定为四个商品模块 -->
    <div class="vmall-section">
      <div class="vmall-activities">
        <div
          class="vmall-activity-product"
          v-for="item in activities"
          :key="item.id"
          @click="activityClick(item)"
        >
          <!-- 上部分：商品图片 -->
          <div class="vmall-product-image">
            <div class="vmall-image-placeholder">
              <el-image
                style="width: 100%; height: 100%"
                :src="item.image"
                fit="cover"
                :preview-src-list="[item.image]"
                :preview-teleported="true"
              >
                <template #error>
                  <div class="vmall-image-fallback">商品图片</div>
                </template>
              </el-image>
            </div>
          </div>

          <!-- 下部分：商品信息 -->
          <div class="vmall-product-info">
            <div class="vmall-product-name">{{ item.name }}</div>
            <div class="vmall-product-desc">{{ item.description }}</div>
            <div class="vmall-product-price">￥{{ item.discounted_price }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新人有礼福利专区，左右结构 -->
    <div class="vmall-section" style="background-color: #fff">
      <img src="../assets/18.png" alt="" style="width: 100%" />
    </div>

    <!-- 商品列表区域  -->
    <div class="vmall-categories-container">
      <!-- 每个分类作为一个独立区块，添加ID用于定位 -->
      <div
        class="vmall-category-block"
        v-for="(category, index) in categoryList"
        :key="category.id"
        :id="`category-${category.id}`"
        :class="{ 'vmall-category-simple': !isFirstThreeCategories(index) }"
      >
        <!-- 分类区块header - 所有分类都显示 -->
        <div class="vmall-category-header">
          <h3 class="vmall-category-title">{{ category.name }}</h3>
          <div class="vmall-category-more" @click="viewMore(category)">
            更多 >
          </div>
        </div>

        <!-- 上部分：主推商品 - 改为背景图片布局（仅前三个分类显示） -->
        <div
          class="vmall-featured-product-bg"
          v-if="
            isFirstThreeCategories(index) &&
            categoryGoodsMap[category.id] &&
            categoryGoodsMap[category.id].length > 0
          "
          :style="{
            backgroundImage: `url(${categoryGoodsMap[category.id][0].image})`,
          }"
          @click="goDetail(categoryGoodsMap[category.id][0])"
        >
          <div class="vmall-featured-overlay">
            <div class="vmall-featured-content-bg">
              <div class="vmall-featured-name-bg">
                {{ categoryGoodsMap[category.id][0].name }}
              </div>
              <div class="vmall-featured-desc-bg">
                {{ categoryGoodsMap[category.id][0].description }}
              </div>
              <div class="vmall-featured-price-bg">
                ￥{{ categoryGoodsMap[category.id][0].discounted_price }}
              </div>
              <button
                class="vmall-buy-now-btn-bg"
                @click.stop="goDetail(categoryGoodsMap[category.id][0])"
              >
                立即购买
              </button>
            </div>
          </div>
        </div>

        <!-- 下部分：商品轮播区域  -->
        <div
          class="vmall-sub-products-carousel"
          v-if="
            categoryGoodsMap[category.id] &&
            categoryGoodsMap[category.id].length >
              (isFirstThreeCategories(index) ? 1 : 0)
          "
        >
          <div class="vmall-carousel-wrapper">
            <!-- 左箭头 -->
            <div
              class="vmall-carousel-arrow vmall-carousel-arrow-prev"
              v-if="
                carouselStates[category.id] &&
                carouselStates[category.id].currentIndex > 0
              "
              @click="carouselNavigate(category.id, 'prev')"
            >
              <el-icon><ArrowLeft /></el-icon>
            </div>

            <!-- 轮播内容 -->
            <div class="vmall-carousel-content-wrapper">
              <div
                class="vmall-carousel-track"
                :style="{
                  transform: `translateX(-${
                    carouselStates[category.id]
                      ? carouselStates[category.id].currentIndex * 25
                      : 0
                  }%)`,
                }"
              >
                <div
                  class="vmall-activity-product"
                  v-for="(item, itemIndex) in categoryGoodsMap[
                    category.id
                  ].slice(isFirstThreeCategories(index) ? 1 : 0)"
                  :key="itemIndex"
                  @click="goDetail(item)"
                >
                  <!-- 上部分：商品图片 -->
                  <div class="vmall-product-image">
                    <div class="vmall-image-placeholder">
                      <el-image
                        style="width: 100%; height: 100%"
                        :src="item.image"
                        fit="cover"
                        :preview-src-list="[item.image]"
                        :preview-teleported="true"
                      >
                        <template #error>
                          <div class="vmall-image-fallback">商品图片</div>
                        </template>
                      </el-image>
                    </div>
                  </div>

                  <!-- 下部分：商品信息 -->
                  <div class="vmall-product-info">
                    <div class="vmall-product-name">{{ item.name }}</div>
                    <div class="vmall-product-desc">{{ item.description }}</div>
                    <div class="vmall-product-price">
                      ￥{{ item.discounted_price }}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 右箭头 -->
            <div
              class="vmall-carousel-arrow vmall-carousel-arrow-next"
              v-if="
                carouselStates[category.id] &&
                carouselStates[category.id].currentIndex <
                  carouselStates[category.id].totalItems - 4
              "
              @click="carouselNavigate(category.id, 'next')"
            >
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
        </div>

        <!-- 空状态显示 -->
        <div
          class="vmall-empty-category"
          v-if="
            !categoryGoodsMap[category.id] ||
            categoryGoodsMap[category.id].length === 0
          "
        >
          <div class="vmall-empty-text">暂无商品</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer class="vmall-footer">
    <div class="footer-container">
      <!-- 服务保障 -->
      <div class="footer-services">
        <div
          class="service-item"
          v-for="service in footerServices"
          :key="service.title"
        >
          <el-icon :size="24"><component :is="service.icon" /></el-icon>
          <div class="service-info">
            <div class="service-title">{{ service.title }}</div>
            <div class="service-desc">{{ service.desc }}</div>
          </div>
        </div>
      </div>

      <!-- 帮助链接 -->
      <div class="footer-links">
        <div
          class="link-column"
          v-for="column in helpColumns"
          :key="column.title"
        >
          <h4>{{ column.title }}</h4>
          <ul>
            <li v-for="link in column.links" :key="link">
              <a href="#">{{ link }}</a>
            </li>
          </ul>
        </div>
        <div class="link-column contact-column">
          <h4>联系我们</h4>
          <p class="contact-phone">950805</p>
          <p class="contact-desc">7x24小时客服热线</p>
          <div class="contact-buttons">
            <el-button size="small">在线客服</el-button>
            <el-button size="small" type="primary">反馈建议</el-button>
          </div>
        </div>
      </div>

      <!-- 版权信息 -->
      <div class="footer-bottom">
        <div class="bottom-links">
          <a href="#">关于我们</a>
          <span>|</span>
          <a href="#">隐私政策</a>
          <span>|</span>
          <a href="#">服务协议</a>
          <span>|</span>
          <a href="#">知识产权</a>
          <span>|</span>
          <a href="#">法律声明</a>
        </div>
        <div class="copyright">
          <p>Copyright © 2025 ApexStore 版权所有</p>
          <p>
            增值电信业务经营许可证：粤B2-20200000 | 粤公网安备 440300000000号
          </p>
        </div>
      </div>
    </div>
  </footer>

  <!-- 整合的侧边工具栏 -->
  <div class="vmall-side-tools">
    <div class="tool-item" @click="goShopCar">
      <el-icon :size="20"><ShoppingCart /></el-icon>
      <span class="tool-text">购物车</span>
    </div>
    <div class="tool-divider"></div>
    <div
      class="tool-item"
      :class="{ disabled: !showBackToTop }"
      @click="showBackToTop ? smoothScrollToTop() : null"
    >
      <el-icon :size="20"><Top /></el-icon>
      <span class="tool-text">返回顶部</span>
    </div>
  </div>
</template>

<style>
:root {
  --vmall-primary: #e02020;
  --vmall-primary-hover: #c61818;
  --vmall-text-primary: #333;
  --vmall-text-secondary: #666;
  --vmall-text-light: #999;
  --vmall-bg-light: #f5f5f5;
  --vmall-border: #e5e5e5;
}

.vmall-main {
  width: 100%;
  min-width: 850px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  background: transparent;
  overflow: visible !important;
  position: relative;
}

/* 轮播图容器 */
.vmall-carousel-container {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
}

/* 轮播图可视宽度样式 */
.vmall-carousel-viewport {
  width: 100% !important;
  margin: 0 auto;
  border-radius: 0 !important;
  position: relative;
  left: 0;
  right: 0;
}

.vmall-carousel-viewport .el-carousel__container {
  border-radius: 0 !important;
  width: 100% !important;
}

.vmall-carousel-viewport .el-carousel__item {
  border-radius: 0 !important;
}

.vmall-carousel-item {
  position: relative;
  height: 400px;
  overflow: hidden;
  border-radius: 0 !important;
  width: 100% !important;
}

.vmall-carousel-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  color: white;
  font-size: 18px;
  font-weight: 500;
}

/* 快捷导航 */
.vmall-nav-shortcuts {
  background: transparent;
  margin-top: 20px;
  padding: 20px 0;
  overflow: visible;
}

.vmall-nav-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow: visible;
}

.vmall-nav-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
  overflow: visible;
}

.vmall-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
  position: relative;
  overflow: visible;
}

.vmall-nav-item:hover {
  transform: translateY(-3px);
  border-color: var(--vmall-primary);
}

.vmall-nav-image {
  margin-bottom: 10px;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}

.vmall-nav-icon {
  font-size: 28px;
}

.vmall-nav-text {
  font-size: 14px;
  color: var(--vmall-text-primary);
  font-weight: 500;
  line-height: 1.2;
}

/* 通用区块样式  */
.vmall-section {
  margin: 30px 0;
  background: transparent;
  overflow: visible;
  position: relative;
}

/* 热门活动区块 */
.vmall-activities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  overflow: visible;
}

.vmall-activity-product {
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: auto;
  padding: 0;
  position: relative;
}

.vmall-activity-product:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-color: var(--vmall-primary);
}

/* 商品图片部分 */
.vmall-product-image {
  padding: 15px;
  background: #fafafa;
  border-bottom: 1px solid var(--vmall-border);
  overflow: hidden;
}

.vmall-image-placeholder {
  width: 100%;
  height: 180px;
  border-radius: 6px;
  overflow: hidden;
  background-size: 20px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vmall-image-fallback {
  color: var(--vmall-text-light);
  font-size: 14px;
}

/* 商品信息部分 */
.vmall-product-info {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow: visible;
}

.vmall-product-name {
  font-size: 20px;
  color: var(--vmall-text-primary);
  font-weight: 450;
  line-height: 1.4;
}

.vmall-product-desc {
  font-size: 14px;
  color: var(--vmall-text-secondary);
  line-height: 1.4;
  margin: 0px 0px 40px;
}

.vmall-product-price {
  font-size: 17px;
  margin-top: auto;
}

/* 重新设计的商品列表区域 */
.vmall-categories-container {
  background: transparent;
  margin: 30px 0;
  overflow: visible !important;
  position: relative;
}

.vmall-category-block {
  background: transparent;
  margin-bottom: 40px;
  scroll-margin-top: 120px;
  overflow: visible !important;
  position: relative;
}

/* 分类区块header */
.vmall-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--vmall-primary);
  overflow: visible;
}

.vmall-category-title {
  font-size: 22px;
  color: var(--vmall-text-primary);
  font-weight: 600;
  margin: 0;
}

.vmall-category-more {
  color: var(--vmall-text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: color 0.3s;
}

.vmall-category-more:hover {
  color: var(--vmall-primary);
}

/* 主推商品样式 */
.vmall-featured-product-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  height: 400px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.vmall-featured-product-bg:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.vmall-featured-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 40px;
}

.vmall-featured-content-bg {
  max-width: 50%;
  padding-left: 20px;
}

.vmall-featured-name-bg {
  font-size: 34px;
  margin-bottom: 10px;
  line-height: 1.3;
}

.vmall-featured-desc-bg {
  font-size: 18px;
  margin-bottom: 20px;
  line-height: 1.5;
  color: #666;
  opacity: 0.9;
}

.vmall-featured-price-bg {
  font-size: 18px;
  margin: 40px 0px 55px;
}

.vmall-buy-now-btn-bg {
  background-color: black;
  color: white;
  border: none;
  padding: 13px 30px;
  border-radius: 35px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.vmall-buy-now-btn-bg:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* 小商品轮播区域 */
.vmall-sub-products-carousel {
  background: transparent;
  padding: 20px 0;
  overflow: visible;
  position: relative;
}

.vmall-carousel-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.vmall-carousel-content-wrapper {
  overflow: hidden;
  padding: 0 40px;
}

.vmall-carousel-track {
  display: flex;
  transition: transform 0.3s ease;
  gap: 20px;
}

.vmall-carousel-track .vmall-activity-product {
  flex: 0 0 calc(25% - 15px);
  min-width: 0;
}

.vmall-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 10;
  transition: all 0.3s;
}

.vmall-carousel-arrow:hover {
  background: var(--vmall-primary);
  color: white;
}

.vmall-carousel-arrow-prev {
  left: 0;
}

.vmall-carousel-arrow-next {
  right: 0;
}

/* 空状态样式 */
.vmall-empty-category {
  background: white;
  border-radius: 8px;
  padding: 60px 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: visible;
}

.vmall-empty-text {
  color: var(--vmall-text-light);
  font-size: 16px;
}

/* 简洁版Footer样式 */
.vmall-footer {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  background: #f8f8f8;
  border-top: 1px solid #e8e8e8;
  margin-top: 60px;
  font-size: 14px;
  color: #666;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 20px;
}

/* 服务保障区域 */
.footer-services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  padding: 30px 0;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 40px;
}

.service-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.service-item .el-icon {
  color: #e02020;
}

.service-info {
  display: flex;
  flex-direction: column;
}

.service-title {
  font-weight: 500;
  margin-bottom: 4px;
  color: #333;
}

.service-desc {
  font-size: 12px;
  color: #999;
}

/* 帮助链接区域 */
.footer-links {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px;
  margin-bottom: 40px;
}

.link-column h4 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

.link-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.link-column li {
  margin-bottom: 12px;
}

.link-column a {
  color: #666;
  text-decoration: none;
  transition: color 0.3s;
}

.link-column a:hover {
  color: #e02020;
}

.contact-column .contact-phone {
  font-size: 24px;
  color: #e02020;
  font-weight: 500;
  margin: 0 0 8px 0;
}

.contact-column .contact-desc {
  font-size: 12px;
  color: #999;
  margin: 0 0 20px 0;
}

.contact-buttons {
  display: flex;
  gap: 10px;
}

/* 底部版权信息 */
.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #e8e8e8;
}

.bottom-links {
  margin-bottom: 15px;
}

.bottom-links a {
  color: #666;
  text-decoration: none;
  margin: 0 10px;
  transition: color 0.3s;
}

.bottom-links a:hover {
  color: #e02020;
}

.bottom-links span {
  color: #ddd;
}

.copyright {
  font-size: 12px;
  color: #999;
  line-height: 1.6;
}

/* 侧边工具栏样式 */
.vmall-side-tools {
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 999;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tool-item {
  padding: 15px 12px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--vmall-text-secondary);
  text-decoration: none;
}

.tool-item:hover {
  background: var(--vmall-primary);
  color: white;
}

.tool-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tool-item.disabled:hover {
  background: white;
  color: var(--vmall-text-secondary);
}

.tool-divider {
  height: 1px;
  background: var(--vmall-border);
  margin: 0;
}

.tool-text {
  font-size: 12px;
  white-space: nowrap;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .vmall-nav-row {
    grid-template-columns: repeat(4, 1fr);
  }

  .vmall-activities {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-services {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .vmall-nav-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .vmall-activities {
    grid-template-columns: 1fr;
  }

  .footer-services {
    grid-template-columns: 1fr;
  }

  .footer-links {
    grid-template-columns: 1fr;
  }
}
</style>